<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器对象模型-位置对象(Browser Object Model - Location Object)</title>
  <!-- 
  在JavaScript的浏览器对象模型（BOM）中，Location对象用于表示当前文档的URL信息，并提供了一系列方法和属性来获取和修改URL。
  1. Location对象概述
  - Location对象是window对象的一个属性，可以通过window.location访问。
  - 它包含有关当前文档的URL的详细信息，并允许开发者进行页面跳转或修改浏览器地址栏的内容。

  2. Location对象的属性
  Location对象提供了多个属性，用于获取当前文档的URL各个部分：
  - href：返回当前文档的完整URL，或设置新的URL以进行页面跳转。例如：
    console.log(window.location.href); // 获取当前URL
    window.location.href = 'https://www.example.com'; // 跳转到新URL
  - protocol：返回当前文档的协议部分（如http:或https:）。
    console.log(window.location.protocol); // 输出 "https:"
  - host：返回当前文档的主机名和端口号（如www.example.com:80）。
    console.log(window.location.host); // 输出 "www.example.com:80"
  - hostname：返回当前文档的主机名（如www.example.com），不包括端口号。
    console.log(window.location.hostname); // 输出 "www.example.com"
  - port：返回当前文档的端口号（如80或443），如果没有指定端口，则返回空字符串。
    console.log(window.location.port); // 输出 "443" 或 ""
  - pathname：返回当前文档的路径部分（如/path/to/page）。
    console.log(window.location.pathname); // 输出 "/path/to/page"
  - search：返回URL的查询字符串部分，包括问号（如?query=1）。
    console.log(window.location.search); // 输出 "?query=1"
  - hash：返回URL的锚点部分，包括井号（如#section1）。
    console.log(window.location.hash); // 输出 "#section1"
    
  3. Location对象的方法
  Location对象还提供了一些方法，用于控制浏览器的导航：
  - assign(url)：加载指定的URL，类似于设置href属性。
    window.location.assign('https://www.example.com');
  - replace(url)：加载指定的URL，但不会在历史记录中创建新记录，因此用户无法使用“后退”按钮返回到原来的页面。
    window.location.replace('https://www.example.com');
  - reload()：重新加载当前文档，可以选择从缓存或服务器加载。
    window.location.reload(); // 从缓存重新加载
    window.location.reload(true); // 强制从服务器重新加载

  4. 使用示例
  以下是一个简单的示例，展示如何使用Location对象：
  // 获取当前URL的各个部分
    console.log('完整URL:', window.location.href);
    console.log('协议:', window.location.protocol);
    console.log('主机名:', window.location.hostname);
    console.log('路径:', window.location.pathname);

  // 跳转到新页面
  function redirectToExample() {
      window.location.href = 'https://www.example.com';
  }
 
  总结
  Location对象是浏览器对象模型中的一个重要组成部分，提供了对当前文档URL的访问和控制。通过使用Location对象，开发者可以方便地获取URL的各个部分，进行页面跳转和重新加载等操作。
   -->
</head>
<body>

  <button>打开新的网页</button>
  <button>替换新的网页</button>
  <button>网页重新加载</button>

  <script>
    // 1. Location对象的属性
    const url = window.location.href; // 完整的URL
    const protocol = window.location.protocol; // 协议
    const hostname = window.location.hostname; // 主机名
    const pathname = window.location.pathname; // 路径
    const search = window.location.search; // 查询字符串
    const hash = window.location.hash; // 锚点
    console.log("Location对象的属性-url:", url);
    console.log("Location对象的属性-protocol:", protocol);
    console.log("Location对象的属性-hostname:", hostname);
    console.log("Location对象的属性-pathname:", pathname);
    console.log("Location对象的属性-search:", search);
    console.log("Location对象的属性-hash:", hash);
    console.log("Location对象的属性-URL:", window.location);
    
    // 2. Location对象的方法
    // window.location.assign('https://www.example.com');
    // window.location.replace('https://www.example.com');
    // window.location.reload();

    // 3. Location对象的事件
    // window.location.hash = 'section2';
    // window.location.hash = 'section3';
    // window.location.hash = 'section4';

    // 4. URLSearchParams对象
    const urlSearchString = "?name=John&age=30";
    const params = new URLSearchParams(urlSearchString);
    const name = params.get('name');
    const age = params.get('age');
    console.log("URLSearchParams对象的属性-name:", name);
    console.log("URLSearchParams对象的属性-age:", age);

    params.append('city', 'New York');
    console.log("URLSearchParams对象的方法-params:", params, params.get('city'));
    console.log("URLSearchParams对象的方法-params.toString():", params.toString());
    
    // 5. URL对象
    const urlObject = new URL('https://www.example.com/search?q=javascript');
    const searchParams = urlObject.searchParams;
    searchParams.set('q', 'HTML');
    console.log("URL对象的属性-searchParams:", searchParams);
    console.log("URL对象的属性-searchParams.toString():", searchParams.toString());
    console.log("URL对象的属性-url:", urlObject);

    // 6. 补充
    const btns = document.querySelectorAll('button');
    btns[0].onclick = function () {
      window.location.assign('https://www.baidu.com');
    }
    btns[1].onclick = function () {
      window.location.replace('https://www.baidu.com');
    }
    btns[2].onclick = function () {
      window.location.reload();
    }



  </script>
  
</body>
</html>